<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="shortcut icon" href="/images/a/logo.ico"/>
    <meta charset="UTF-8">
    <title>编辑器</title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script type="text/javascript" src="/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <link rel="stylesheet" href="/css/editormd.min.css">
    <link rel="stylesheet" href="/css/editormd.preview.css">
    <link rel="stylesheet" href="/css/font-awesome.scss">
    <script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>

    <script src="/js/editormd.min.js"></script>
<!--    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>-->
    <!-- 回显必须加的-->
    <script src="/lib/marked.min.js"></script>
    <script src="/lib/prettify.min.js"></script>
    <script src="/lib/raphael.min.js"></script>
    <script src="/lib/underscore.min.js"></script>
    <script src="/lib/sequence-diagram.min.js"></script>
    <script src="/lib/flowchart.min.js"></script>
    <script src="/lib/jquery.flowchart.min.js"></script>
    <script src="/js/editormd.js"></script>

<body style="background-color: rgb(207, 205, 205);">

<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
    <div class="container-fluid">
        <a class="navbar-brand ms-5" href="#">博客创作</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav col-10">
                <li class="nav-item ">
                    <a class="nav-link active" aria-current="page" href="/blog/intoMain">返回首页</a>
                </li>
            </ul>
            <form class="d-flex me-5 col-2" role="search">
                <!--       todo username-->
                <span style="font-size: 20px; font-family:'微软雅黑" class="me-2" th:text="${username}"></span>
                <img th:src="|@{/images/}${session.pic}|" alt="Logo" width="50" height="50" style="border-radius: 50px"
                     class="d-inline-block align-text-top">
                <span style="font-size: 15px;"></span>
            </form>
        </div>
    </div>
</nav>
<div class="container-fluid sticky-top">
    <div class="" id="test-editormd" style="margin: 0 auto">
        <textarea style="display:none;" id="markdown-md-content" name="my-editormd-markdown-doc"></textarea>
        <textarea style="display:none;" id="markdown-html-content" name="my-editormd-html-code"></textarea>
    </div>
</div>


<div class="container-fluid fixed-bottom border"
     style="background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);">
    <div class="row mt-1">
        <div class="col-4 ">
            <p>文章分类</p>
            <select class="form-select form-select-md mb-2" id="mySelect" name="mySelect"
                    aria-label=".form-select-lg example"
                    style="width: 100px;">
                <option selected>主分类：</option>
                <option value="1">学习</option>
                <option value="2">生活</option>
                <option value="3">讨论</option>
            </select>

            <select class="form-select form-select-sm mb-3" id="cySelect" name="cySelect"
                    aria-label=".form-select-sm example"
                    style="width: 100px;">
                <option selected>次分类</option>
                <option value="1">编程语言</option>
                <option value="2">互联网</option>
                <option value="3">生活趣事</option>
                <option value="4">时事</option>
                <option value="5">其他</option>
            </select>
        </div>
        <div class="col-8">
            <div class="form-floating mt-1 mb-2" style="width: 300px;">
                <!--        todo 修改-->
                <input type="text" id="title" class="form-control" placeholder="标题 ">
                <label for="floatingInput">标题</label>
            </div>
            <div class="form-floating">
                <input type="text" id="subtitle" class="form-control" placeholder="摘要">
                <label for="floatingPassword">摘要</label>
            </div>

        </div>
        <button class="btn btn-outline-success " type="button" id="send"><i class="iconfont icon-tianjia"
                                                                            style="font-size: 20px;"></i>上传
        </button>
    </div>

</div>
<script type="text/javascript" src="/js/bootstrap.js"></script>
<script>

    $(document).ready(function () {

        //时钟
        function showTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');

            // 更新HTML元素的内容
            $('#clock').textContent = `${hours}:${minutes}:${seconds}`;
        }

// 初始显示时间
        showTime();

// 每秒更新一次时间
        setInterval(showTime, 1000);

        var testEditor;
        testEditor = editormd("test-editormd", {
            width: "90%",
            height: 698,
            path: "/lib/",
            saveHTMLTOTextarea: true,
            htmlDecode: "style,script,iframe",
            tocm: true,
            tex: true,
            emoji: true,
            taskList: true,
            flowChart: true,
            sequenceDiagram: true,
            placeholder: "使用Markdown语法会有奇效",

            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/blog/uploadPic",// 图片上传接口
            toolbarIcons: function () {
                return [
                    "undo", "redo", "|",
                    "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|",
                    "h1", "h2", "h3", "h4", "h5", "h6", "|",
                    "list-ul", "list-ol", "hr", "|",
                    "link", "reference-link", "image", "code", "preformatted-text", "code-block", "datetime", "html-entities", "pagebreak", "|",
                    "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|",
                    "help", "info", "leftIcon", "centerIcon", "rightIcon"]
            },
            onload: function () {
                console.log('onload', this);
                //this.fullscreen();
                //this.unwatch();
                //this.watch().fullscreen();

                //this.setMarkdown("#PHP");
                //this.width("100%");
                //this.height(480);
                //this.resize("100%", 640);
            }
        });

        // 2.body 传参 传数据 .md
        let testEditormdView;
        $('#send').click(function () {
            let title = $('#title').val();
            let info = {
                phone: "1",
                title: title,
                subtitle: $('#subtitle').val(),
                content: $('#markdown-md-content').val(),
                mid: $('#mySelect').val(),
                cid: $('#cySelect').val()
            }
            let jsonInfo = JSON.stringify(info);

            $.ajax({
                url: "/blog/submitMarkdown", // 后端接收Markdown的URL
                type: "post", // 使用POST方法发送数//
                contentType: "application/json", // 发送JSON数据
                data: jsonInfo, // 将Markdown文本作为JSON对象发送
                success: function (response) {
                    // 请求成功时的处理逻辑
                    alert('文章上传成功，等待审核');
                    if (response) {
                        // 使用window.location.href进行重定向
                        window.location.href = "/blog/editor2?title=" + title;

                    } else {
                        // 处理没有重定向URL的情况
                        alert("跳转失败")
                    }
                },
                error: function (xhr, status, error) {
                    // 请求失败时的处理逻辑
                    console.error('发送失败:', status, error);
                    alert('发送Markdown到后端时出错');
                }
            });
        });
    });

</script>
</body>
</html>
